<template>
	<view class="consultation-record">
		<!-- 顶部选项卡 -->
		<view class="tabs">
			<view 
				:class="['tab', activeTab === 1 ? 'active' : '']" 
				@click="switchTab(1)"
			>
				提交咨询
			</view>
			<view 
				:class="['tab', activeTab === 2 ? 'active' : '']" 
				@click="switchTab(2)"
			>
				待回复
			</view>
			<view 
				:class="['tab', activeTab === 3 ? 'active' : '']" 
				@click="switchTab(3)"
			>
				已回复
			</view>
		</view>
		
		<!-- 提交咨询表单 -->
		<view v-if="activeTab === 1" class="consultation-form">
			<view class="form-item">
				<view class="label">订单编号</view>
				<u-input 
					v-model="form.orderNo" 
					placeholder="请输入订单编号" 
					:clearable="true"
				/>
			</view>
			
			<view class="form-item">
				<view class="label">工单类型</view>
				<view class="type-buttons">
					<view 
						v-for="(type, index) in workOrderTypes" 
						:key="index"
						:class="['type-btn', form.workOrderType === type ? 'active' : '']"
						@click="selectWorkOrderType(type)"
					>
						{{type.name}}
					</view>
				</view>
			</view>
			
			<view class="form-item">
				<view class="label">工单内容描述</view>
				<u-input 
					v-model="form.content" 
					type="textarea" 
					height="200" 
					placeholder="请输入工单内容描述" 
					:clearable="true"
				/>
			</view>
			
			<!-- 图片上传 -->
			<view class="form-item">
				<view class="label">上传图片（可选）</view>
				<view class="img-list">
					<view class="img-item" v-for="(item, index) in imgList" :key="index">
						<image class="image" :src="item" mode="aspectFill"></image>
						<view class="icon" @click="delImgBtn(index)">
							<u-icon name="close-circle-fill" color="#f55800" size="40"></u-icon>
						</view>
					</view>
					<view class="img-item add-img" @click="upImgBtn" v-if="imgList.length < 4">
						<image class="image" src="@/static/images/upImg.png" mode=""></image>
					</view>
				</view>
			</view>
			
			<view class="submit-btn">
				<u-button 
					shape="circle"
					class="bg-primary-important c-fff-important"
					text="提交咨询" 
					:loading="submitting"
					@click="submitConsultation"
				></u-button>
			</view>
		</view>
		
		<!-- 待回复列表 -->
		<view v-if="activeTab === 2" class="consultation-list">
			<view class="list-item" v-for="(item, index) in pendingList" :key="index">
				<view class="item-header">
					<view class="item-title">工单内容：{{item.content}}</view>
					<view class="item-status status-pending">待回复</view>
				</view>
				<view class="item-info">
					<view class="info-row">
						<text class="info-label">工单类型：</text>
						<text class="info-value">{{item.cate.name}}</text>
					</view>
					<view class="info-row">
						<text class="info-label">工单编号：</text>
						<text class="info-value">{{item.sn}}</text>
					</view>
					<view class="info-row">
						<text class="info-label">订单编号：</text>
						<text class="info-value">{{item.order_num}}</text>
					</view>
					<view class="info-row">
						<text class="info-label">创建时间：</text>
						<text class="info-value">{{item.createtime_text}}</text>
					</view>
				</view>
				<view class="item-actions">
					<u-button
						shape="circle"
						class="bg-error-important c-fff-important"
						text="撤销工单" 
						@click="revokeWorkOrder(item.id)"
					></u-button>
				</view>
			</view>
			
			<u-empty 
				v-if="pendingList.length === 0" 
				mode="data" 
				icon="http://cdn.uviewui.com/uview/empty/data.png"
				text="暂无待回复工单"
			></u-empty>
		</view>
		
		<!-- 已回复列表 -->
		<view v-if="activeTab === 3" class="consultation-list">
			<view class="list-item" v-for="(item, index) in repliedList" :key="index">
				<view class="item-header">
					<view class="item-title">工单内容：{{item.content}}</view>
					<view class="item-status status-replied">已回复</view>
				</view>
				<view class="item-info">
					<view class="info-row">
						<text class="info-label">工单类型：</text>
						<text class="info-value">{{item.cate.name}}</text>
					</view>
					<view class="info-row">
						<text class="info-label">工单编号：</text>
						<text class="info-value">{{item.sn}}</text>
					</view>
					<view class="info-row">
						<text class="info-label">订单编号：</text>
						<text class="info-value">{{item.order_num}}</text>
					</view>
					<view class="info-row">
						<text class="info-label">创建时间：</text>
						<text class="info-value">{{item.createtime_text}}</text>
					</view>
					<view class="info-row">
						<text class="info-label">回复内容：</text>
						<text class="info-value">{{item.reply.content}}</text>
					</view>
					<view  class="info-row">
						<text class="info-label">回复时间：</text>
						<text class="info-value">{{item.reply.createtime_text}}</text>
					</view>
				</view>
				<view class="item-actions">
					<u-button 
						type="primary" 
						size="mini" 
						text="继续回复" 
						@click="continueReply(item.id)"
					></u-button>
				</view>
			</view>
			
			<u-empty 
				v-if="repliedList.length === 0" 
				mode="data" 
				icon="http://cdn.uviewui.com/uview/empty/data.png"
				text="暂无已回复工单"
			></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前激活的选项卡：1-提交咨询 2-待回复 3-已回复
				activeTab: 1,
				// 工单类型列表（从接口获取）
				workOrderTypes: [],
				// 表单数据
				form: {
					orderNo: '',
					workOrderType: '',
					content: ''
				},
				// 图片相关
				imgList: [],
				imgList_o: [],
				// 提交状态
				submitting: false,
				// 待回复列表
				pendingList: [
				],
				// 已回复列表
				repliedList: [
					
				]
			};
		},
		onLoad(opt) {
			if(opt.order_num){
				this.form.orderNo = opt.order_num
			}
			this.getWorkOrderTypes();
			
		},
		methods: {
			// 切换选项卡
			switchTab(tab) {
				this.activeTab = tab;
				
				// 切换时重新加载对应数据
				if (tab === 2) {
					this.getPendingList();
				} else if (tab === 3) {
					this.getRepliedList();
				}
			},
			
			// 获取工单类型
			getWorkOrderTypes() {
				this.$httpApi.feedbacktype().then((res) => {
					if (res.code == 1) {
						this.workOrderTypes = res.data;
						// 默认选择第一个类型
						if (this.workOrderTypes.length > 0) {
							this.form.workOrderType = this.workOrderTypes[0];
						}
					}
				});
			},
			
			// 选择工单类型
			selectWorkOrderType(type) {
				this.form.workOrderType = type;
			},
			
			// 上传图片
			upImgBtn() {
				const that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						that.$tips.showLoading('上传中');
						const uploadTask = uni.uploadFile({
							url: that.$baseVal.baseUrl + '/api/Common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'token': uni.getStorageSync('token')
							},
							formData: {
								'type': 'feedback'
							},
							success: function(uploadFileRes) {
								that.$tips.hideLoading();
								const res = JSON.parse(uploadFileRes.data);
								if (res.code == 1) {
									that.imgList = that.imgList.concat(res.data.fullurl);
									that.imgList_o = that.imgList_o.concat(res.data.url);
								}
							}
						});
					}
				});
			},
			
			// 删除图片
			delImgBtn(index) {
				this.imgList.splice(index, 1);
				this.imgList_o.splice(index, 1);
			},
			
			// 提交咨询
			submitConsultation() {
				const that = this;
				
				if (!that.form.orderNo) {
					that.$tips.showToast('请输入订单编号');
					return;
				}
				
				if (!that.form.workOrderType) {
					that.$tips.showToast('请选择工单类型');
					return;
				}
				
				if (!that.form.content) {
					that.$tips.showToast('请输入工单内容描述');
					return;
				}
				
				that.submitting = true;
				const params = {
					order_num: that.form.orderNo,
					gongdan_cate_id: that.form.workOrderType.id,
					content: that.form.content,
					image: that.imgList_o.join(',')
				};
				
				that.$httpApi.gongDanSave(params).then((res) => {
					that.submitting = false;
					if (res.code == 1) {
						that.$tips.showToast('提交成功');
						// 重置表单
						that.form = {
							orderNo: '',
							workOrderType: that.workOrderTypes.length > 0 ? that.workOrderTypes[0] : '',
							content: ''
						};
						that.imgList = [];
						that.imgList_o = [];
						
						// 切换到待回复选项卡
						// setTimeout(() => {
						// 	that.activeTab = 2;
						// 	that.getPendingList();
						// }, 1500);
					} else {
						that.$tips.showToast(res.msg || '提交失败');
					}
				}).catch(() => {
					that.submitting = false;
					that.$tips.showToast('网络错误，请重试');
				});
			},
			
			// 获取待回复列表
			getPendingList() {
				var params = {status:0}
				this.$httpApi.userfeedback(params).then((res) => {
					if (res.code == 1) {
						this.pendingList = res.data.data || [];
					}
				});
			},
			
			// 获取已回复列表
			getRepliedList() {
				var params = {status:1}
				this.$httpApi.userfeedback(params).then((res) => {
					if (res.code == 1) {
						this.repliedList = res.data.data || [];
					}
				});
			},
			
			// 撤销工单
			revokeWorkOrder(id) {
				uni.showModal({
					title: '提示',
					content: '确定要撤销此工单吗？',
					success: (res) => {
						if (res.confirm) {
							this.$httpApi.gongDanSave({ ids: id,status:2}).then((res) => {
								if (res.code == 1) {
									this.$tips.showToast('撤销成功');
									this.getPendingList();
								} else {
									this.$tips.showToast(res.msg || '撤销失败');
								}
							});
						}
					}
				});
			},
			
			// 继续回复
			continueReply(id) {
				// 这里可以跳转到回复页面或弹出回复对话框
				uni.showModal({
					title: '继续回复',
					editable: true,
					placeholderText: '请输入回复内容',
					success: (res) => {
						if (res.confirm && res.content) {
							this.$httpApi.gongDanSave({
								ids: id,
								content: res.content
							}).then((response) => {
								if (response.code == 1) {
									this.$tips.showToast('回复成功');
									this.getRepliedList();
								} else {
									this.$tips.showToast(response.msg || '回复失败');
								}
							});
						}
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.consultation-record {
		min-height: 100vh;
		background-color: #f7f8fa;
	}
	
	// 选项卡样式
	.tabs {
		display: flex;
		background: #fff;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.tab {
		flex: 1;
		text-align: center;
		padding: 30rpx 0;
		font-size: 32rpx;
		color: #666;
		position: relative;
		transition: all 0.3s;
	}
	
	.tab.active {
		color: var(--color-primary);
		font-weight: bold;
	}
	
	.tab.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 80rpx;
		height: 6rpx;
		background: var(--color-primary);
		border-radius: 3rpx;
	}
	
	// 表单样式
	.consultation-form {
		padding: 30rpx;
	}
	
	.form-item {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}
	
	.label {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.type-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}
	
	.type-btn {
		padding: 10rpx 20rpx;
		background: #f7f8fa;
		border-radius: 40rpx;
		font-size: 28rpx;
		color: #666;
		transition: all 0.3s;
	}
	
	.type-btn.active {
		background: var(--color-primary);
		color: #fff;
	}
	
	// 图片上传样式
	.img-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}
	
	.img-item {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}
	
	.img-item .image {
		width: 100%;
		height: 100%;
	}
	
	.add-img {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f7f8fa;
		border: 2rpx dashed #dcdfe6;
	}
	
	.img-item .icon {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.submit-btn {
		margin-top: 40rpx;
	}
	
	// 列表样式
	.consultation-list {
		padding: 30rpx;
	}
	
	.list-item {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}
	
	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}
	
	.item-title {
		flex: 1;
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		line-height: 1.4;
	}
	
	.item-status {
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #fff;
	}
	
	.status-pending {
		background: #ff6b35;
	}
	
	.status-replied {
		background: #07c160;
	}
	
	.item-info {
		margin-bottom: 20rpx;
	}
	
	.info-row {
		display: flex;
		margin-bottom: 10rpx;
		font-size: 28rpx;
	}
	
	.info-label {
		color: #666;
		min-width: 140rpx;
	}
	
	.info-value {
		color: #333;
		flex: 1;
	}
	
	.item-actions {
		display: flex;
		justify-content: flex-end;
	}
</style>